 <template>
  <div>
    <div class>
      <el-row :gutter="24">
        <el-col :sm="24" :md="13" :lg="13">
          <!-- 账户统计 -->
          <Card :title="'账户统计'" :img="totalImg" :background_color="'#40c9c6'" :data="accountData"></Card>
        </el-col>
        <el-col :sm="24" :md="11" :lg="11">
          <!-- 今日统计 -->
          <Card :title="'今日统计'" :img="todayImg" :background_color="'#f56c6c'" :data="todayData"></Card>
        </el-col>
        <el-col :sm="12" :md="12" :lg="13">
          <!-- 总用户使用数 -->
          <Card :title="'用户统计'" :img="usersImg" :background_color="'#34b9d0d1'" :data="usersData"></Card>
        </el-col>
        <el-col :sm="12" :md="12" :lg="11">
          <!-- 总课程购买数 -->
          <Card
            :title="'课程统计'"
            :img="purchaseImg"
            :background_color="'#62bff0'"
            :data="purchaseData"
          ></Card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getPlatform } from "src/service/count";
import Card from "src/components/card/card.vue";
import total from "../../../images/total.png";
import today from "../../../images/today.png";
import purchase from "../../../images/purchase.png";
import users from "../../../images/users.png";

import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      totalImg: total,
      todayImg: today,
      purchaseImg: purchase,
      usersImg: users,

      accountData: [
        {
          name: "现金总收入",
          value: ""
        },
        {
          name: "总销售分成",
          value: ""
        },
        {
          name: "冻结金额",
          value: ""
        }
      ], // 账户统计
      todayData: [
        {
          name: "现金收入",
          value: ""
        },
        {
          name: "销售分成",
          value: ""
        }
      ], // 今日统计
      purchaseData: [
        {
          name: "总购买数",
          value: ""
        },
        {
          name: "今日购买数",
          value: ""
        } // 购买统计
      ], // 购买统计
      usersData: [
        {
          name: "平台总用户",
          value: ""
        },
        {
          name: "今日新用户",
          value: ""
        }
      ] //用户统计
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  mounted() {
    this.init();
  },
  components: { Card },
  methods: {
    ...mapMutations(["RECORD_ACCOUNT", "GET_USERINFO"]),
    init() {
      this.GET_USERINFO();

      getPlatform().then(res => {
        console.log(res);
        this.accountData[0].value = "￥" + res.totalMoney;
        this.accountData[1].value = "￥" + res.totalProfit;
        this.accountData[2].value = "￥" + res.lockMoney;
        if (this.userInfo.orgType !== "PLATFORM") {
          this.accountData.shift();
        }

        this.todayData[0].value = "￥" + res.todayMoney;
        this.todayData[1].value = "￥" + res.todayProfit;

        this.purchaseData[0].value = res.totalCourseNumber;
        this.purchaseData[1].value = res.todayCourseNumber;

        this.usersData[0].value = res.totalUserNumber;
        this.usersData[1].value = res.todayUserNumber;

        this.RECORD_ACCOUNT(res); // 账户信息记录到缓存中
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
</style>
